<template>
    <div class="feiyong">
        <div class="decrease-add-container">
            <el-header class="title">
                <i class="el-icon-s-order">案件信息</i>
            </el-header>
            <el-divider></el-divider>

            <div class="detals">
                <div class="grid-content bg-purple">案号：<br>{{law.caseNo}}</div>
                <div class="grid-content bg-purple">委托人：<br>{{law.caseWtr}}</div>
                <div class="grid-content bg-purple">案由：<br>{{law.caseCause}}</div>
                <div class="grid-content bg-purple">诉讼地位：<br>{{law.caseLawsuitStatus}}</div>
                <div class="grid-content bg-purple">诉讼阶段：<br>{{law.caseStatus}}</div>
                <div class="grid-content bg-purple">最低收费：<br>{{law.caseLawsuitobj}}</div>
                <div class="grid-content bg-purple">实收代理费：<br>{{law.caseAgencyfee}}</div>
                <div class="grid-content bg-purple">已申请减免(元)：<br>{{totalMoney}}</div>
            </div>
        </div>

        <div class="decrease-add-container">
            <el-header class="title">
                <i class="el-icon-document">资料填写</i>
            </el-header>
            <el-divider></el-divider>

            <el-form :model="caseDecrease" class="form-law" label-width="100px" style="width: 100%">
                <el-container>
                    <el-form-item label="申请人：">
                        <el-input v-model="caseDecrease.person" style="width: 450px" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="申请金额：">
                        <el-input type="number" v-model="caseDecrease.decreaseMoney" style="width: 450px"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="备注/原因：">
                        <el-input type="textarea" v-model="caseDecrease.reason" style="width: 1000px"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="资料上传：">
                        <el-upload
                                name="multipartfile"
                                action="http://localhost/upload"
                                :headers="{token:this.$store.state.token}"
                                :data="{folder:'decrease'}"
                                class="upload-demo"
                                ref="upload"
                                :limit="1"
                                :multiple="false"
                                :auto-upload="false"
                                :on-success="handleUploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-input v-model="caseDecrease.file" v-show="false"></el-input>
                </el-container>
                <el-container>
                    <el-form-item>
                        <el-button type="primary" @click="handleSave">提交申请</el-button>
                        <el-button @click="handleBack" v-if="cost==null || cost==undefined">返回</el-button>
                        <el-button @click="handleContinue" v-if="cost!=null && cost!=undefined">暂不申请,下一步</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
        </div>
    </div>
</template>

<script>
    //引入DecreaseService
    import {CaseDecreaseService} from "../../../model/gs/CaseDecreaseService";
    //拿到实例
    const caseDecreaseService = CaseDecreaseService.getInstance();

    export default {
        props:['law','active','cost'],
        data() {
            return {
                caseDecrease:{
                    caseLawId:this.law.id,
                    person:this.law.caseWtr
                },
                totalMoney:''
            }
        },
        created(){
            if(this.law.id != null && this.law.id != undefined && this.law.id != ''){
                this.getDecreaseTotal()
            }
        },
        methods:{
            handleContinue(){
                this.$emit('completed')
            },
            handleBack(){
                this.$emit('back')
            },
            //获取总申请减免金额
            getDecreaseTotal(){
                caseDecreaseService.getTotalByLaw(this.law.id).then(response => {
                    this.totalMoney = response.data.data
                })
            },
            //上传成功的回调
            handleUploadSuccess(response){
                this.caseDecrease.file = response.data
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleSave(){
                if(!caseDecreaseService.check(this.caseDecrease)) {
                    return
                }
                //提交申请
                caseDecreaseService.save(this.caseDecrease).then(response => {
                    if(response.data.code === 0){
                        this.$message.success({
                            message:'申请成功',
                            duration:1000
                        })
                        if(this.active!=null && this.active!=undefined){
                            this.$emit('completed')
                        }
                    } else {
                        console.log(response.data.message)
                        this.$message.error({
                            message:response.data.message,
                            duration:1000
                        })
                    }
                })
            }
        },
        watch:{
            law:{
                handler(){
                    if(this.law.id != null && this.law.id != undefined && this.law.id != '') {
                        this.getDecreaseTotal()
                        this.$set(this.caseDecrease,'person',this.law.caseWtr)
                        this.$set(this.caseDecrease,'caseLawId',this.law.id)
                    }
                },
                deep:true
            }
        }
    }
</script>

<style scoped>
    .decrease-add-container{
        width: 100%;
    }
    .title{
        font-size: 20px;
        position: relative;
        top: 30px;
    }
    .feiyong{
        width: 100%;
    }
    .detals{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8px;
    }
    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
</style>